<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北化论坛 - 主界面</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="main-page"> <!-- 添加了 main-page 类，确保样式仅适用于这个页面 -->

<header>
    <h1>北化论坛</h1>
    <div class="profile" onclick="editProfile()">
        <img id="userAvatar" src="default-avatar.png" alt="头像">
        <span id="username">用户ID123</span>
    </div>
</header>

<div class="container">
    <div class="search-bar">
        <input type="text" placeholder="搜索帖子...">
        <button onclick="searchPosts()">搜索</button>
    </div>

    <!-- 动态显示帖子 -->
    <div id="posts-container">
        <!-- 已发布的帖子将通过 JavaScript 动态插入到这里 -->
        <div class="post" id="post1">
            <div class="info">
                <div class="author">
                    <img src="default-avatar.png" alt="头像">
                    <span>用户ID123</span>
                </div>
                <div class="date">2024-12-23</div>
            </div>
            <div class="content">这是一个示例帖子内容。</div>
            <div class="actions">
                <!-- 点赞按钮 -->
                <button class="like" onclick="toggleLike(this)">
                    <i class="fas fa-thumbs-up"></i>
                </button>
                <!-- 踩按钮 -->
                <button class="dislike" onclick="toggleDislike(this)">
                    <i class="fas fa-thumbs-down"></i>
                </button>
                <!-- 删除按钮 -->
                <button class="delete" onclick="deletePost(this)">删除</button>
            </div>
        </div>
    </div>
</div>

<div class="floating-btn" onclick="createPost()">+</div>

<script>
    // 页面加载时更新头像和用户名
    window.onload = function() {
        const savedAvatar = localStorage.getItem('userAvatar');
        const savedUsername = localStorage.getItem('username');

        if (savedAvatar) {
            document.getElementById('userAvatar').src = savedAvatar;  // 更新主页面头像
            document.querySelectorAll('.post .author img').forEach(function(img) {
                img.src = savedAvatar;  // 更新每个帖子中的头像
            });
        }

        if (savedUsername) {
            document.getElementById('username').innerText = savedUsername;  // 更新用户名
            document.querySelectorAll('.post .author span').forEach(function(span) {
                span.innerText = savedUsername;  // 更新每个帖子中的用户名
            });
        }
    };

    // 切换点赞状态
    function toggleLike(button) {
        if (button.classList.contains('liked')) {
            button.classList.remove('liked');
        } else {
            button.classList.add('liked');
            button.closest('.actions').querySelector('.dislike').classList.remove('disliked');
        }
    }

    // 切换踩状态
    function toggleDislike(button) {
        if (button.classList.contains('disliked')) {
            button.classList.remove('disliked');
        } else {
            button.classList.add('disliked');
            button.closest('.actions').querySelector('.like').classList.remove('liked');
        }
    }

    // 删除帖子
    function deletePost(button) {
        const post = button.closest('.post');
        post.remove();
    }

    // 搜索功能
    function searchPosts() {
        window.location.href = 'search.html';
    }

    // 创建新帖子
    function createPost() {
        window.location.href = 'create_post.html';
    }

    // 编辑个人资料
    function editProfile() {
        window.location.href = 'edit_profile.html';
    }

    // 获取URL中的帖子内容
    function getQueryParams() {
        const params = new URLSearchParams(window.location.search);
        return {
            content: params.get('content')
        };
    }

    // 渲染帖子
    function renderPost(content) {
        const postContainer = document.getElementById('posts-container');
        
        // 创建新帖子元素
        const postElement = document.createElement('div');
        postElement.classList.add('post');
        postElement.innerHTML = ` 
            <div class="info">
                <div class="author">
                    <img src="default-avatar.png" alt="头像">
                    <span>用户ID123</span>
                </div>
                <div class="date">${new Date().toLocaleString()}</div>
            </div>
            <div class="content">${content}</div>
            <div class="actions">
                <button class="like" onclick="toggleLike(this)">
                    <i class="fas fa-thumbs-up"></i>
                </button>
                <button class="dislike" onclick="toggleDislike(this)">
                    <i class="fas fa-thumbs-down"></i>
                </button>
                <button class="delete" onclick="deletePost(this)">删除</button>
            </div>
        `;
        postContainer.prepend(postElement);  // 将新帖子插入到最前面
    }

    // 页面加载时，如果有帖子内容参数，调用 renderPost
    const queryParams = getQueryParams();
    if (queryParams.content) {
        renderPost(queryParams.content);  // 渲染新发布的帖子
    }
</script>

</body>
</html>
